import QtQuick 2.0
import QtMultimedia 5.12

import "qrc:/"

Item {
    signal startClicked

    id: root
    anchors.fill: parent


    MediaPlayer {
        id: button_music
        source: "qrc:/music/game/distance_button.wav"
    }

    // 背景图
    Image {
        anchors.fill: parent
        id: item_image_background
        source: "qrc:/img/menuUI/background.jpg"
    }

    // 主菜单按钮
    Grid {
        id :grid
        x:0.3*parent.width
        y:0.35*parent.height
        height: 0.3*parent.height
        width: 0.4*parent.width

        spacing: 5
        rows: 3
        columns: 1

        GameButton {
            id: startGame
            width: parent.width
            height:  0.3*parent.height
            source:  "qrc:/img/menuUI/start.png"
            text: qsTr("开始游戏")
            onClicked: {
                button_music.play()
                startClicked()
            }
        }

        GameButton {
            id: top
            width: parent.width
            height:  0.3*parent.height
            source:  "qrc:/img/menuUI/start.png"
            text: qsTr("排行榜")
            onClicked: {
                button_music.play()
                console.log("按下了排行榜按钮")
                root.showTopPage()
                panelLoader.visible = true
            }
        }

        GameButton {
            id: quit
            width: parent.width
            height:  0.3*parent.height
            source:  "qrc:/img/menuUI/start.png"
            text: qsTr("退出")
            onClicked: {
                button_music.play()
                Qt.quit()
            }
        }
    }

    Loader {
        id: panelLoader
        anchors.fill: parent
        visible: false

        function setSourceComponent(sourceComponent) {
            panelLoader.sourceComponent = sourceComponent
        }
    }

    Component{
        id:topPage
        TopPage {
            anchors.fill: parent
            onClicked: root.hideTopPage()
        }
    }

    // 排行榜界面
    function showTopPage()
    {
        panelLoader.setSourceComponent(topPage)
    }

    function hideTopPage()
    {
        panelLoader.setSourceComponent(undefined)
    }

}
